<template>
  <div id="container">
          <div id="viewDiv"></div><!--视图对象(view)将挂载到该元素-->
  </div>
</template>

<script setup>
import {深色底图,灰色底图} from '../底图库'//从底图库.js文件中获取深色底图和灰色底图两个底图图层对象
import {onMounted} from 'vue'//引入钩子函数,钩子函数将在相关内容挂载到DOM元素的时候执行
import Map from "@arcgis/core/Map.js"//导入Map模块,地图对象存储了各种地图图层
import MapView from '@arcgis/core/views/MapView'//导入MapView模块,视图对象负责显示地图对象中的图层并提供与用户的交互
import { useStore } from 'vuex'
const store=useStore()//useStore方法返回当前项目的store对象
var map,view
onMounted(()=>{
  map=new Map({//创建地图对象
          basemap:{
                  baseLayers:[]
          }
  })
  switch(store.state.theme){//根据store对象中的state对象的theme属性,判断加载深色底图还是灰色底图以适应相关主题
          case "dark":
                  map.basemap.baseLayers.add(深色底图) 
                  break
          case "light":
                  map.basemap.baseLayers.add(灰色底图)
                  break
  }
  view=new MapView({//创建视图对象,关联相应的map对象和DOM元素
          map:map, container:"viewDiv", zoom:2, 
          constraints:{
                  rotationEnabled:false,
                  maxScale:1300
          }
  })
})
</script>

<style scoped>
  #viewDiv,#container{
          height:100%;width:100%;padding:0;margin:0;
  }
</style>
